<template>
    <div class="nav_wraper">
        <div class="nav_bar">
            <div class="logo">LOGO</div>


            <el-menu class="el-menu-demo" mode="horizontal" text-color="#333" active-text-color="#333">
                <template v-for="(item, index) in menu_list">

                    <template v-if="!item.list">
                        <el-menu-item :index="index">{{ item.title }}</el-menu-item>
                    </template>

                    <template v-else>
                        <el-submenu :index="index">
                            <template slot="title">{{ item.title }}</template>
                            <div class="sub_menu_wrap">
                                <div class="wrap">
                                    <div class="sub_menu_title">{{ item.title }}</div>
                                    <div class="menu_wrap">
                                        <div class="title" v-for="(item1, ind) in item.list" :key="ind">
                                            {{ item1.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-submenu>
                    </template>
                </template>

                <!-- <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <div class="sub_menu_wrap">
                        <div class="wrap">
                            <div class="sub_menu_title">我的工作台</div>
                            <div class="menu_wrap">
                                <div class="title">国际软件服务</div>
                                <div class="title">运用与维护</div>
                                <div class="title">系统集成服务</div>
                                <div class="title">企业数字化转</div>
                                <div class="title">智能汽车互联</div>
                            </div>
                        </div>
                    </div>
                </el-submenu>
                <el-menu-item index="3">消息中心</el-menu-item>
                <el-menu-item index="4">
                    <a href="https://www.ele.me" target="_blank">订单管理</a>
                </el-menu-item> -->
            </el-menu>
            <div class="nav1">中日未来产业中心</div>


        </div>

    </div>
</template>
<script>
export default {
    name: "index",
    data() {
        return {
            menu_list:[{
                title:'首页'
            }, {
                title:'产品服务',
                list:[
                    {name: '国际软件服务'},
                    {name: '运用与维护'},
                    {name: '系统集成服务'},
                    {name: '企业数字化转'},
                    {name: '智能汽车互联'}
                ]
            }, {
                title:'服务案例',
            }, {
                title:'关于我们',
                list:[
                    {name: '国际软件服务'},
                    {name: '运用与维护'},
                    {name: '系统集成服务'},
                    {name: '企业数字化转'},
                    {name: '智能汽车互联'}
                ]
            }]
        }
    },

    created() {

    },
    methods: {

    }
};
</script>

<style lang="scss">
.el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
}
.el-menu--horizontal{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    border-bottom: solid 0px #e6e6e6;
}
.el-menu--horizontal>.el-menu-item {
    color: red;
}
.el-menu--popup{
    display: flex;
    width: 100%;
    padding-bottom: 100px;
    min-width: 100%;
    top: -5px;
    left: 7px;
}

.sub_menu_wrap{
    display: flex;
    justify-content: center;
    width: 100%;

    .wrap{
        width: 80%;
        .sub_menu_title{
            font-size: 28px;
            padding: 30px 0;
            color: #333;
            font-weight: 900;
        }

        .menu_wrap{
            display: flex;
            justify-content: space-between;
            .title{
                color: #333;
                font-size: 16px;
            }
        }

    }
}

.nav1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    font-size: 14px;
    margin-right: 20px;
    font-size: 14px;
    padding: 0 20px;
    cursor: pointer;
    letter-spacing: .63px;
    border: 1px solid #ccc;
    border-radius: 30px;
    color: rgb(51, 51, 51);
}

</style>
<style lang="scss" scope>
@import '@/assets/styles/nav'
</style>
